/*
* 4 elements to get started
*
* ① A scene will contain objects
* ② Some Objects
* ③ A camera
* ④ A renderer
*
* */

// Scene
const scene = new THREE.Scene()

// Red Cube
const geometry = new THREE.BoxGeometry(1, 1, 1) // 几何体
const material = new THREE.MeshBasicMaterial({ color:  0xff0000 }) // 材料
const mesh = new THREE.Mesh(geometry, material) // 网格
scene.add(mesh)

// Sizes 画布大小
const sizes = {
  width: 800,
  height: 600
}

// Camera - 做渲染时，就像给Scene（场景）拍照，理解为一个视角
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height) // 视角，宽高比
// object 和 camera 默认在 the center of the scene and we can't see an object from its inside，所以我们需要把 camera 往后移动一点
camera.position.z = 7
camera.position.y = 1
camera.position.x = 1
scene.add(camera)

// Renderer
const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({
  canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)

renderer.render(scene, camera)